<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
	</head>

	<body>
		<div class="mui-content" style="background: #FFFFFF;">
			<div class="" style="width: 80%; display: inline-block; padding-left: 15px; margin-top: 15px; text-align: center;">
				<div class="mui-input-row mui-search">
					<input type="search" id="search" class="mui-input-clear" placeholder="电影/电视剧/影人" />
				</div>
			</div>
			<span id="cancel" style="width: 20%;text-align: center;float: right;line-height: 30px;color: #2A7CF8;font-size: 16px;margin-top: 15px;">取消</span>
			<div style="font-size: 12px; color: #888888; background: #E6E6E6; padding: 5px 15px; ">
				<span>搜索记录</span>
				<span id="clear" style="color: #2A7CF8; float: right;">清除</span>
			</div>
			<ul id="list" class="mui-table-view">
				<li class="mui-table-view-cell" v-for="item in records" @click="open_result(item)">{{item}}</li>
			</ul>
		</div>
		
		<script src="../js/mui.min.js"></script>
		<script src="../js/vue.min.js"></script>
		<script type="text/javascript">
			mui.init();
		
			var searchhistory = new Vue({
				el   	: "#list",
				data 	: {
					records : []
				},
				methods : {
					//打开搜索结果页
					open_result : function(item){
						mui.openWindow({
							id     : 'search-result.html',
							url    : 'search-result.html',
							extras : {
								name : item
							}
						});
						searchhistory.records.remove(item);
						searchhistory.records.splice(0,0,item);
					}
				}
			});
			
			//新增属性
			//判断数组是否包含某个值
			Array.prototype.contains = function(obj){
				var i = this.length;
				while(i--){
					if(this[i] === obj){
						return true;
					}
				}
				return false;
			}
			//返回当前数组中某个值得下标
			Array.prototype.indexOf = function(val){
				for(var i=0;i<this.length;i++){
					if(this[i] == val){
						return i;
					}
				}
				return -1;
			}
			//移出数组中的某个值
			Array.prototype.remove = function(val){
				var index = this.indexOf(val);
				if(index > -1){
					//array.splice(index,howmany,item1,.....,itemX)
					//				index   必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
					//				howmany	必需。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
					//				item1, ..., itemX	可选。要添加到数组的新元素
					this.splice(index,1);
				}
			}
			
			//给取消搜索按钮绑定事件——返回主页
			mui('#cancel')[0].addEventListener('tap', function(){
				mui.back();
			});
			//给清除搜索记录按钮绑定事件
			mui('#clear')[0].addEventListener('tap', function(){
				//设置本地存储  plus.storage.setItem('键','值'); -> plus.storage.setItem('name','dongyixueyuan');
				plus.storage.setItem('history', '');
				searchhistory.records = [];
			});
			
			mui.plusReady(function(){
				//查询本地存储 plus.storage.getItem('键'); -> var name = plus.storage.getItem('name');
				if(plus.storage.getItem('history') !== ''){
					searchhistory.records = plus.storage.getItem('history').split(',');
				}
			});
			
			//键盘事件
			document.onkeydown = function(event){
				var e = event || window.event || arguments.caller.arguments[0];
				if(e && e.keyCode == 13){
					//回车事件
					//eval(string)   string	必需。要计算的字符串，其中含有要计算的 JavaScript 表达式或要执行的语句。
					//返回值:通过计算 string 得到的值（如果有的话）。
					//该方法只接受原始字符串作为参数，如果 string 参数不是原始字符串，那么该方法将不作任何改变地返回。因此请不要为 eval() 函数传递 String 对象来作为参数。
					if( searchhistory.records.contains( eval( document.getElementById('search') ).value) ){
						searchhistory.records.remove( eval( document.getElementById('search') ).value );
					}
					//splice()方法：向/从数组中添加/删除项目，然后返回被删除的项目。
					searchhistory.records.splice(0, 0, eval( document.getElementById('search') ).value );
					plus.storage.setItem('history', searchhistory.records.toString());
					
					//跳转到搜索结果页
					mui.openWindow({
						id     : 'search-result.html',
						url    : 'search-result.html',
						extras : {
							name : eval( document.getElementById('search') ).value
						}
					})
				}
			}
		</script>
	</body>

</html>